<link href="/static/admin/css/plugins/dropzone/basic.css" rel="stylesheet">
<link href="/static/admin/css/plugins/dropzone/dropzone.css" rel="stylesheet">
<link href="/static/admin/css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
<link href="/static/admin/css/style.css" rel="stylesheet">
<link href="/static/admin/css/plugins/bootstrap-markdown/bootstrap-markdown.min.css" rel="stylesheet">
<link href="/static/admin/css/plugins/chosen/bootstrap-chosen.css" rel="stylesheet">
<link href="/static/admin/css/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet">

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>添加文章</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/">首页</a>
            </li>
            <li class="breadcrumb-item">
                <a href="/admin">后台</a>
            </li>
            <li class="breadcrumb-item">
                <a href="/admin/article">文章管理</a>
            </li>
            <li class="breadcrumb-item active">
                <strong>添加文章</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>添加文章
                        <small>请使用markdown语法</small>
                    </h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li><a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form id="form" role="form">
                        <div class="form-row">
                            <div class="form-group col-md-3">
                                <label for="inputEmail4">标题</label>
                                <input type="text" class="form-control" name="title" placeholder="请输入文章标题" required>
                            </div>
                            <div class="form-group col-md-3">
                                <label class="font-normal">分类</label>
                                <div>
                                    <select data-placeholder="请选择一个分类" name="cid" class="chosen-select form-control"
                                            tabindex="2">
                                        <option></option>
                                    {{range .list}}
                                        <option value="{{.Id}}">{{.Name}}</option>{{end}}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-3">
                                <label for="inputPassword4">标签</label>
                                <input class="tagsinput form-control" type="text" name="tags" placeholder="输入标签后回车"/>
                            </div>
                            <div class="form-group col-md-3">
                                <label for="inputEmail4">作者</label>
                                <input type="text" name="author" class="form-control" value="{{.master}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword4">摘要</label>
                            <textarea class="form-control" rows="3" name="summary"
                                      placeholder="markdown格式将被解析"></textarea>
                        </div>

                        <div class="form-group">
                            <textarea name="content" data-provide="markdown" rows="10" id="content"></textarea>
                        </div>

                        <button type="button" id="submit" class="btn btn-primary">发表</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="showDropZone" style="display: none;">
    <form action="#" class="dropzone" id="dropzoneForm">
        <div class="fallback">
            <input name="file" type="file" multiple/>
        </div>
    </form>
</div>
<!-- Chosen -->
<script src="/static/admin/js/plugins/chosen/chosen.jquery.js"></script>
<!-- Tags Input -->
<script src="/static/admin/js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<!-- layer -->
<script src="/static/admin/layer/layer.js"></script>
<!-- Bootstrap markdown -->
<script src="/static/admin/js/plugins/bootstrap-markdown/bootstrap-markdown.js"></script>
<script src="/static/admin/js/plugins/bootstrap-markdown/markdown.js"></script>
<!-- Jasny -->
<script src="/static/admin/js/plugins/jasny/jasny-bootstrap.min.js"></script>
<!-- DROPZONE -->
<script src="/static/admin/js/plugins/dropzone/dropzone.js"></script>
<script>
    // 存储链接
    var bucket = "";

    // 剪切控制
    function toClipboard(text) {
        var domain = window.location.host;
        var url = "http://" + domain + "/" + text;
        var tag = document.createElement('input');
        tag.setAttribute('id', 'cp_path_input');
        tag.value = url;
        document.getElementsByTagName('body')[0].appendChild(tag);
        document.getElementById('cp_path_input').select();
        document.execCommand('copy');
        document.getElementById('cp_path_input').remove();
        layer.msg("附件路径已被复制！", {time: 2000});
    }

    // markdown 控制
    $("#content").markdown({
        iconlibrary: 'fa',
        additionalButtons: [
            [{
                name: "groupUpload",
                data: [{
                    name: "Upload",
                    toggle: true,
                    title: "Upload",
                    icon: {
                        fa: 'fa fa-upload',
                    },
                    callback: function (e) {
                        //弹出页面层
                        layer.open({
                            type: 1,
                            title: "上传文件(成功后关闭窗口复制资源链接)",
                            skin: 'layui-layer-rim', //加上边框
                            area: ['420px', '250px'], //宽高
                            content: $('#showDropZone'),
                            cancel: function (index, layero) {
                                if (bucket !== "") {
                                    toClipboard(bucket);
                                }
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                            }
                        });
                    }
                }]
            }]
        ]
    });

    //上传控制
    Dropzone.autoDiscover = false;
    $("#dropzoneForm").dropzone({
        url: "/api/file/upload",
        maxFilesize: 20,
        dictDefaultMessage: "<strong>拖拽文件到此处或者点击此处选择文件进行上传. </strong></br>",
        init: function () {
            this.on("success", function (file) {
                var data = JSON.parse(file.xhr.response);
                //上传成功 将结果复制给bucket
                bucket = data.data[0].Path;
            });
        }
    });
    // 下拉列表选择控制
    $('.chosen-select').chosen({width: "100%"});
    // input tag 控制
    $(document).ready(function () {
        $('.tagsinput').tagsinput({
            tagClass: 'label label-primary'
        });
    });
    // 文章提交
    $("#submit").click(function () {
        const postData = $("#form").serialize();
        $.post("/api/article/add", postData, function (res) {
            if (res.Error === 0) {
                layer.open({
                    skin: 'layer-class',
                    title: res.Title
                    , content: res.Msg,
                    btn: ['浏览', '列表'],
                    yes: function (index) {
                        window.location.href = "/article/" + res.data;
                    }
                    , btn2: function (index) {
                        window.location.href = "/admin/article";
                    }
                });
            } else {
                layer.msg(res.Title + res.Msg, {
                    icon: 2,
                    shade: [0.8, '#393D49'], // 透明度  颜色
                    time: 2000
                });
            }
        }, "json");
        return false;
    });
</script>